<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>书城首页</title>
<link type="text/css" rel="stylesheet" href="/static/css/style.css" >
<script src="/static/script/jquery-1.7.2.js"></script>
<script>
	$(function(){
		//给添加购物车的按钮绑定单击事件
		$(".addBook2Cart").click(function(){
			//获取要添加的图书的id
			var bookId = $(this).attr("id");
			//设置请求的url
			var url = "/addBook2Cart"
			//设置请求参数
			var param = {"bookId":bookId}
			//发送Ajax请求
			$.post(url,param,function(res){
				if(res == "请先登录！"){
					location = "/pages/user/login.html"
				}else{
				//将响应信息设置到span中
				$("#bookMsg").text(res)
				}
			});
		});
	});
</script>
</head>
<body>
	
	<div id="header">
			<img class="logo_img" alt="" src="/static/img/logo.gif" >
			<span class="wel_word">网上书城</span>
			{{if .IsLogin}}
			<div>
				<span>欢迎<span class="um_span">{{.Username}}</span>光临小陈书城</span>
				<a href="/getCartInfo">购物车</a>
				<a href="/getMyOrder">我的订单</a>
				<a href="/logout">注销</a>&nbsp;&nbsp;
				<a href="/main">返回</a>
			</div>
			{{else}}
			<div>
				<a href="pages/user/login.html">登录</a> | 
				<a href="pages/user/regist.html">注册</a> &nbsp;&nbsp;
				<a href="/pages/manager/manager.html">后台管理</a>
			</div>
			{{end}}
	</div>
	
	<div id="main">
		<div id="book">
			<div class="book_cond">
			<form action="/getPageBooksByPrice" method="POST">
				价格：<input type="text" name="min"> 元 - 
					<input type="text" name="max"> 元 <button>查询</button>
			</form>			
			</div>
			<div style="text-align: center">
				<!-- <span>您的购物车中有3件商品</span> -->
				<div>
					<span style="color: red" id="bookMsg"></span></span>
				</div>
			</div>

			{{range .Books}}
			<div class="b_list">
				<div class="img_div">
					<img class="book_img" alt="" src="{{.ImgPath}}" />
				</div>
				<div class="book_info">
					<div class="book_name">
						<span class="sp1">书名:</span>
						<span class="sp2">{{.Title}}</span>
					</div>
					<div class="book_author">
						<span class="sp1">作者:</span>
						<span class="sp2">{{.Author}}</span>
					</div>
					<div class="book_price">
						<span class="sp1">价格:</span>
						<span class="sp2">￥{{.Price}}</span>
					</div>
					<div class="book_sales">
						<span class="sp1">销量:</span>
						<span class="sp2">{{.Sales}}</span>
					</div>
					<div class="book_amount">
						<span class="sp1">库存:</span>
						<span class="sp2">{{.Stock}}</span>
					</div>
					<div class="book_add">
						{{if .Stock}}
						<button id="{{.ID}}" class="addBook2Cart">加入购物车</button>
						<!-- <input type="hidden" value="{{.ID}}"/> -->
						{{else}}
						<span style="color:red">小二拼命补货中...</span>
						{{end}}
					</div>
				</div>
			</div>
			{{end}}
			
		</div>
		
		<div id="page_nav">
				{{if .IsHasPrev}}
					<a href="/getPageBooksByPrice?min={{.MinPrice}}&max={{.MaxPrice}}">首页</a>
					<a href="/getPageBooksByPrice?pageNo={{.GetPrevPageNo}}&min={{.MinPrice}}&max={{.MaxPrice}}">上一页</a>
				{{end}}	
					当前是第{{.PageNo}}页，共{{.TotalPageNo}}页，共{{.TotalRecord}}条记录
				{{if .IsHasNext}}	
					<a href="/getPageBooksByPrice?pageNo={{.GetNextPageNo}}&min={{.MinPrice}}&max={{.MaxPrice}}">下一页</a>
					<a href="/getPageBooksByPrice?pageNo={{.TotalPageNo}}&min={{.MinPrice}}&max={{.MaxPrice}}">末页</a>
				{{end}}	
					 到第<input value="{{.PageNo}}" name="pn" id="pn_input"/>页
					<input type="button" value="确定" id="sub">
					<script>
						//给确定按钮绑定单击事件
						$("#sub").click(function(){
							//获取输入的页码
							var pageNo = $("#pn_input").val();
							location = "/getPageBooksByPrice?pageNo="+pageNo+"&min={{.MinPrice}}&max={{.MaxPrice}}"
						});
					</script>
			</div>
	
	</div>
	
	<div id="bottom">
		<span>
			小陈书城.Copyright &copy;2022
		</span>
	</div>
</body>
</html>